<template>
    <view class="container">
        <!-- <div class="border">
        <div style="height: 10px;"></div>
            <div class="border-content">
                <div style="color: #718778;">
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">单位名称:</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            <input v-model="form.unitName" type="text">
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">税号:</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            <input v-model="form.taxNumber" type="text">
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">单位地址:</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            <input v-model="form.unitAddress" type="text">
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">电话:</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            <input v-model="form.phone" type="tel">
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">开户银行:</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            <input v-model="form.bank" type="text">
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">银行账户:</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            <input v-model="form.bankAccount" type="text">
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 30rpx;"></div>
                    <div class="save" @click="submitInfo">保存修改</div>
                </div>
            </div>
        </div> -->
        <div style="height: 15rpx;"></div>
        <u-steps activeColor="#1a512c" :current="current">
            <u-steps-item title="确认汇款户名">
            </u-steps-item>
            <u-steps-item title="线下汇款"></u-steps-item>
            <u-steps-item title="充值结果反馈"></u-steps-item>
        </u-steps>
        <!-- 步骤 -->
        <div class="content">
            <div v-if="current == 0">
                <div style="height: 10px;"></div>
                <div class="tips">请您汇款前务必确认汇款户名已在下方展示。</div>
                <div style="height: 15rpx;"></div>
                <div class="border_name">
                    <div style="margin-left: 2.5%;">{{ nickName }}</div>
                </div>
            </div>
            <div v-if="current == 1">
                <div>
                    <div style="height: 10px;"></div>
                    <div class="tips">收款账号</div>
                    <div style="height: 10px;"></div>
                    <div class="title">
                        <div>{{ bankAccount }}</div>
                        <div class="copy" @click="copy(this.bankAccount)">
                            <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fcopy.png" />
                        </div>
                    </div>
                </div>
                <div>
                    <div style="height: 10px;"></div>
                    <div class="tips">收款户名</div>
                    <div style="height: 10px;"></div>
                    <div class="title">
                        <div>{{ bankAccountName }}</div>
                        <div class="copy" @click="copy(this.bankAccountName)">
                            <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fcopy.png" />
                        </div>
                    </div>
                </div>
                <div>
                    <div style="height: 10px;"></div>
                    <div class="tips">收款银行</div>
                    <div style="height: 10px;"></div>
                    <div class="title">
                        <div>{{ bankName }}</div>
                        <div class="copy" @click="copy(this.bankName)">
                            <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fcopy.png" />
                        </div>
                    </div>
                </div>
                <div>
                    <div style="height: 10px;"></div>
                    <div class="tips">转账途径</div>
                    <div style="height: 10px;"></div>
                    <div class="title">
                        <div>网上银行/手机银行/电汇/支票</div>
                        <!-- <div class="copy">复制</div> -->
                    </div>
                </div>
            </div>
            <div v-if="current == 2">
                <div>
                    <div style="height: 10px;"></div>
                    <div class="tips">到账时间</div>
                    <div style="height: 10px;"></div>
                    <div class="title">一般为一天以内导致，请耐心等待</div>
                </div>
                <div>
                    <div style="height: 10px;"></div>
                    <div class="tips">反馈方式</div>
                    <div style="height: 10px;"></div>
                    <div class="title">充值结果将通过邮箱向您反馈</div>
                </div>
            </div>
        </div>
        <div class="next" v-if="current == 0" @click="current = 1">下一步</div>
        <div class="button_container" v-if="current == 1">
            <div class="top" @click="current = 0">上一步</div>
            <div class="bottom" @click="current = 2">下一步</div>
        </div>
        <div class="next" v-if="current == 2" @click="current = 1">上一步</div>
    </view>
</template>
<script>
import { publicAcc, saveAcc, showMessage } from '../api/api';
export default {
    data() {
        return {
            form: {},
            current: 0,
            bankAccount: '',
            bankName: '',
            bankAccountName: '',
            nickName:''
        }
    },
    methods: {
        funObj() {
            // publicAcc().then(res => {
            //     console.log(res.data);
            //     if (res.data.code == 200) {
            //         const { data } = res.data;
            //         console.log(data, 'data');
            //         this.form = data;
            //     }
            // })
        },
        // 提交
        submitInfo() {
            saveAcc(this.form).then(res => {
                console.log(res.data, 'add');
                if (res.data.code == 200) {
                    uni.showToast({
                        title: res.data.msg,
                        icon: 'success',
                        mask: true
                    })
                    setTimeout(() => {
                        uni.navigateBack({ delta: 1 })
                    }, 1000)
                } else {
                    uni.showToast({ title: res.data.msg, icon: 'none' })
                }
            })
        },
        copy(e) {
            uni.setClipboardData({
                data: e, // e是你要保存的内容
                success: function () {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'none'
                    })
                }
            })

        }
    },
    onShow() {
        this.funObj();
        this.nickName = uni.getStorageSync('userInfo').nickName
        showMessage().then(res => {
            console.log(res.data, 'res.data');
            if (res.data.code == 200) {
                this.bankAccountName = res.data.data.bankAccountName;
                this.bankAccount = res.data.data.bankAccount;
                this.bankName = res.data.data.bankName;
                console.log(this.bankAccount, this.bankAccountName, this.bankName, '12345');
            }
        })
    }
}
</script>
<style lang="scss">
.container {
    .border {
        background: #E3EDE2;
        height: 100vh;
        overflow-y: scroll;

        .border-content {
            width: 90%;
            margin-left: 5%;
        }
    }
}

.content {
    width: 90%;
    margin-left: 5%;
}

.tips {
    color: #999999;
    font-size: 14px;
}

.border_name {
    border: 1px solid #999999;
    height: 35px;
    display: flex;
    align-items: center;
}

.next {
    border-top: 0.5px solid #999999;
    color: #1a512c;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.title {
    font-size: #000000;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.copy {
    margin-left: 2.5%;
}
.copy image{
    width: 50rpx;
    height: 50rpx;
}

.button_container {
    border-top: 0.5px solid #999999;
    display: flex;
    align-items: center;
    height: 70px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.top {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a512c;
    height: 100%;
}

.bottom {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a512c;
    height: 100%;
}
</style>